<template>
  <div class="checkin-section">
    <h2>办理入住</h2>
    
    <!-- 步骤指示器 -->
    <div class="steps-indicator">
      <div 
        v-for="(step, index) in steps" 
        :key="index"
        :class="['step-item', { 
          active: currentStep === index, 
          completed: currentStep > index 
        }]"
      >
        <div class="step-number">
          <svg v-if="currentStep > index" width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span v-else>{{ index + 1 }}</span>
        </div>
        <div class="step-label">{{ step }}</div>
      </div>
    </div>

    <!-- 步骤 1: 选择房间 -->
    <div v-if="currentStep === 0" class="step-content">
      <div class="step-header">
        <h3>第一步：选择房间</h3>
        <p class="step-description">查询并选择可用房间</p>
      </div>
      
      <div class="room-query">
        <div class="form-row">
          <div class="form-group">
            <label>房型偏好：</label>
            <select v-model="filters.roomType">
              <option value="">全部房型</option>
              <option value="standard">标准间</option>
              <option value="deluxe">豪华间</option>
              <option value="suite">套房</option>
            </select>
          </div>
          <div class="form-group">
            <label>价格范围：</label>
            <select v-model="filters.priceRange">
              <option value="">不限</option>
              <option value="low">经济型 (¥200-300)</option>
              <option value="mid">舒适型 (¥300-500)</option>
              <option value="high">豪华型 (¥500+)</option>
            </select>
          </div>
        </div>
      </div>

      <div class="available-rooms-grid">
        <div 
          v-for="roomId in filteredRooms" 
          :key="roomId"
          :class="['room-option', { selected: form.roomId === roomId }]"
          @click="selectRoom(roomId)"
        >
          <div class="room-icon">🏠</div>
          <div class="room-number">房间 {{ roomId }}</div>
          <div class="room-details">
            <span class="room-type">标准间</span>
            <span class="room-price">¥280/晚</span>
          </div>
          <div v-if="form.roomId === roomId" class="selected-badge">✓ 已选</div>
        </div>
      </div>

      <div v-if="availableRooms.length === 0" class="empty-state">
        <p>暂无可用房间</p>
      </div>
    </div>

    <!-- 步骤 2: 客户信息 -->
    <div v-if="currentStep === 1" class="step-content">
      <div class="step-header">
        <div class="header-content">
          <h3>第二步：填写客户信息</h3>
          <p class="step-description">请填写入住客户的真实信息</p>
        </div>
        <button @click="fillDefaultGuest" class="btn-quick-fill" type="button">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="margin-right: 6px;">
            <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M8.5 11a4 4 0 100-8 4 4 0 000 8zM20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          快速填充（张三）
        </button>
      </div>

      <div class="form-container">
        <div class="form-row">
          <div class="form-group required">
            <label>客户姓名：<span class="required-mark">*</span></label>
            <input 
              type="text" 
              v-model="form.guestName" 
              placeholder="请输入客户真实姓名"
              @input="validateField('guestName')"
            />
            <span v-if="errors.guestName" class="error-tip">{{ errors.guestName }}</span>
          </div>
          
          <div class="form-group required">
            <label>联系电话：<span class="required-mark">*</span></label>
            <input 
              type="tel" 
              v-model="form.guestPhone" 
              placeholder="请输入11位手机号码"
              maxlength="11"
              @input="validateField('guestPhone')"
            />
            <span v-if="errors.guestPhone" class="error-tip">{{ errors.guestPhone }}</span>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group required">
            <label>证件类型：<span class="required-mark">*</span></label>
            <select v-model="form.idType">
              <option value="idcard">身份证</option>
              <option value="passport">护照</option>
              <option value="other">其他证件</option>
            </select>
          </div>
          
          <div class="form-group required">
            <label>证件号码：<span class="required-mark">*</span></label>
            <input 
              type="text" 
              v-model="form.idNumber" 
              placeholder="请输入证件号码"
              @input="validateField('idNumber')"
            />
            <span v-if="errors.idNumber" class="error-tip">{{ errors.idNumber }}</span>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group required">
            <label>入住天数：<span class="required-mark">*</span></label>
            <div class="input-with-unit">
              <input 
                type="number" 
                v-model.number="form.stayDays" 
                min="1"
                max="30"
                placeholder="请输入入住天数"
              />
              <span class="unit">天</span>
            </div>
          </div>
          
          <div class="form-group">
            <label>特殊需求：</label>
            <input 
              type="text" 
              v-model="form.specialRequest" 
              placeholder="如需加床、早餐等（可选）"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 步骤 3: 空调设置 -->
    <div v-if="currentStep === 2" class="step-content">
      <div class="step-header">
        <h3>第三步：空调初始设置</h3>
        <p class="step-description">为客户预设空调工作模式</p>
      </div>

      <div class="ac-settings">
        <div class="setting-group">
          <label class="setting-label">空调模式：</label>
          <div class="mode-buttons">
            <button 
              :class="['mode-btn', { active: form.mode === ACMode.COOLING }]"
              @click="form.mode = ACMode.COOLING"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 2v4M12 18v4M22 12h-4M6 12H2M19.07 4.93l-2.83 2.83M7.76 16.24l-2.83 2.83M19.07 19.07l-2.83-2.83M7.76 7.76L4.93 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <span>制冷模式</span>
              <small>18-25°C</small>
            </button>
            <button 
              :class="['mode-btn', { active: form.mode === ACMode.HEATING }]"
              @click="form.mode = ACMode.HEATING"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 2v20M17 7l-5 5-5-5M17 17l-5-5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <span>制热模式</span>
              <small>25-30°C</small>
            </button>
          </div>
        </div>

        <div class="setting-info">
          <div class="info-card">
            <div class="info-icon">🌡️</div>
            <div class="info-content">
              <div class="info-label">默认温度</div>
              <div class="info-value">25°C</div>
            </div>
          </div>
          <div class="info-card">
            <div class="info-icon">💨</div>
            <div class="info-content">
              <div class="info-label">默认风速</div>
              <div class="info-value">中风</div>
            </div>
          </div>
          <div class="info-card">
            <div class="info-icon">💰</div>
            <div class="info-content">
              <div class="info-label">计费标准</div>
              <div class="info-value">¥1/度电</div>
            </div>
          </div>
        </div>

        <div class="tips-box">
          <div class="tips-header">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M12 8v4M12 16h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span>温馨提示</span>
          </div>
          <ul class="tips-list">
            <li>客户入住后可在房间内自行调节温度和风速</li>
            <li>空调系统将自动记录使用情况并计费</li>
            <li>退房时系统将生成详细的空调使用账单</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 步骤 4: 确认与支付 -->
    <div v-if="currentStep === 3" class="step-content">
      <div class="step-header">
        <h3>第四步：确认信息与押金</h3>
        <p class="step-description">请核对入住信息并收取押金</p>
      </div>

      <div class="summary-container">
        <div class="summary-section">
          <h4>入住信息</h4>
          <div class="summary-grid">
            <div class="summary-item">
              <span class="label">房间号：</span>
              <span class="value">{{ form.roomId }}</span>
            </div>
            <div class="summary-item">
              <span class="label">客户姓名：</span>
              <span class="value">{{ form.guestName }}</span>
            </div>
            <div class="summary-item">
              <span class="label">联系电话：</span>
              <span class="value">{{ form.guestPhone }}</span>
            </div>
            <div class="summary-item">
              <span class="label">证件类型：</span>
              <span class="value">{{ getIdTypeText(form.idType) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">证件号码：</span>
              <span class="value">{{ maskIdNumber(form.idNumber) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">入住天数：</span>
              <span class="value">{{ form.stayDays }} 天</span>
            </div>
            <div class="summary-item">
              <span class="label">空调模式：</span>
              <span class="value">{{ form.mode === ACMode.COOLING ? '制冷' : '制热' }}</span>
            </div>
            <div v-if="form.specialRequest" class="summary-item full-width">
              <span class="label">特殊需求：</span>
              <span class="value">{{ form.specialRequest }}</span>
            </div>
          </div>
        </div>

        <div class="summary-section payment">
          <h4>费用明细</h4>
          <div class="payment-details">
            <div class="payment-item">
              <span>房费</span>
              <span>¥{{ (280 * form.stayDays).toFixed(2) }}</span>
            </div>
            <div class="payment-item">
              <span>服务费</span>
              <span>¥0.00</span>
            </div>
            <div class="payment-item total">
              <span>预计总费用</span>
              <span>¥{{ (280 * form.stayDays).toFixed(2) }}</span>
            </div>
            <div class="payment-item deposit">
              <span>应付押金</span>
              <span class="highlight">¥200.00</span>
            </div>
          </div>

          <div class="deposit-checkbox">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="depositPaid" 
                class="checkbox-input"
              />
              <span class="checkbox-text">客户已支付押金 ¥200.00</span>
              <span v-if="!depositPaid" class="checkbox-hint">（请在收取押金后勾选）</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="form-actions">
      <button 
        v-if="currentStep > 0" 
        @click="prevStep" 
        class="btn-secondary"
      >
        上一步
      </button>
      <button 
        v-if="currentStep < 3" 
        @click="nextStep" 
        :disabled="!canProceed"
        class="btn-primary"
      >
        下一步
      </button>
      <button 
        v-if="currentStep === 3" 
        @click="handleSubmit" 
        :disabled="isProcessing || !depositPaid"
        class="btn-confirm"
        :title="!depositPaid ? '请先确认已收取押金' : ''"
      >
        <span v-if="!isProcessing">确认入住</span>
        <span v-else>处理中...</span>
      </button>
      <button @click="handleCancel" class="btn-cancel">
        取消入住
      </button>
    </div>

    <!-- 已入住房间列表 -->
    <div v-if="checkInRecords.length > 0" class="occupied-rooms">
      <h3>已入住房间 ({{ checkInRecords.length }})</h3>
      <div class="rooms-table">
        <div class="table-header">
          <span>房间号</span>
          <span>客户姓名</span>
          <span>联系电话</span>
          <span>入住时间</span>
          <span>空调模式</span>
          <span>押金</span>
        </div>
        <div v-for="record in checkInRecords" :key="record.roomId" class="table-row">
          <span class="room-id">{{ record.roomId }}</span>
          <span>{{ record.guestName || '-' }}</span>
          <span>{{ record.guestPhone || '-' }}</span>
          <span>{{ formatDateTime(record.checkInTime) }}</span>
          <span>{{ getModeText(record.mode) }}</span>
          <span class="deposit">¥200.00</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { CheckInRecord } from '../../types/index';
import { ACMode } from '../../types/index';
import { showSuccess, showError, showWarning, showConfirm } from '../../composables/useDialog';

const props = defineProps<{
  availableRooms: string[];
  checkInRecords: CheckInRecord[];
  onCheckIn: (roomId: string, mode: ACMode, guestName?: string, guestPhone?: string, idCard?: string, stayDays?: number, roomType?: string) => Promise<{ success: boolean; message: string; }>;
}>();

const steps = ['选择房间', '客户信息', '空调设置', '确认支付'];
const currentStep = ref(0);
const depositPaid = ref(false); // 押金是否已支付

interface CheckInFormData {
  roomId: string;
  guestName: string;
  guestPhone: string;
  idType: string;
  idNumber: string;
  stayDays: number;
  specialRequest: string;
  mode: ACMode;
  deposit: number;
}

const form = ref<CheckInFormData>({
  roomId: '',
  guestName: '',
  guestPhone: '',
  idType: 'idcard',
  idNumber: '',
  stayDays: 1,
  specialRequest: '',
  mode: ACMode.COOLING,
  deposit: 200
});

const filters = ref({
  roomType: '',
  priceRange: ''
});

const errors = ref<Record<string, string>>({});
const isProcessing = ref(false);

const filteredRooms = computed(() => {
  // 这里可以根据 filters 过滤房间
  return props.availableRooms;
});

const canProceed = computed(() => {
  switch (currentStep.value) {
    case 0:
      return !!form.value.roomId;
    case 1:
      return !!(form.value.guestName && form.value.guestPhone && form.value.idNumber);
    case 2:
      return true;
    case 3:
      return form.value.deposit > 0;
    default:
      return false;
  }
});

const selectRoom = (roomId: string) => {
  form.value.roomId = roomId;
};

const validateField = (field: string) => {
  errors.value[field] = '';
  
  if (field === 'guestName' && !form.value.guestName) {
    errors.value[field] = '请输入客户姓名';
  } else if (field === 'guestPhone') {
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!form.value.guestPhone) {
      errors.value[field] = '请输入联系电话';
    } else if (!phoneRegex.test(form.value.guestPhone)) {
      errors.value[field] = '请输入正确的手机号码';
    }
  } else if (field === 'idNumber' && !form.value.idNumber) {
    errors.value[field] = '请输入证件号码';
  }
};

const nextStep = () => {
  if (currentStep.value === 1) {
    // 验证第二步的所有必填字段
    validateField('guestName');
    validateField('guestPhone');
    validateField('idNumber');
    
    if (Object.values(errors.value).some(err => err)) {
      showWarning('请填写所有必填信息');
      return;
    }
  }
  
  if (currentStep.value < 3) {
    currentStep.value++;
  }
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const handleSubmit = async () => {
  if (!depositPaid.value) {
    showWarning('请先确认已收取押金');
    return;
  }

  const confirmed = await showConfirm(
    '确认入住',
    `确认为客户 ${form.value.guestName} 办理 ${form.value.roomId} 号房间的入住手续吗？\n\n押金：¥200.00`
  );
  
  if (!confirmed) return;

  isProcessing.value = true;
  try {
    const result = await props.onCheckIn(
      form.value.roomId,
      form.value.mode,
      form.value.guestName,
      form.value.guestPhone,
      form.value.idNumber,
      form.value.stayDays,
      'STANDARD' // 默认房型，可以从表单获取
    );

    if (result.success) {
      await showSuccess(`入住办理成功！房间号：${form.value.roomId}`);
      resetForm(false); // 成功后直接重置，不需要确认
    } else {
      showError(result.message);
    }
  } catch (error) {
    console.error('入住办理失败:', error);
    showError('入住办理失败，请重试');
  } finally {
    isProcessing.value = false;
  }
};

// 取消按钮点击
const handleCancel = async () => {
  if (currentStep.value > 0 || form.value.roomId || form.value.guestName) {
    const confirmed = await showConfirm(
      '取消入住',
      '确定要取消当前入住办理吗？已填写的信息将被清空。'
    );
    if (!confirmed) return;
  }
  resetForm(false);
};

// 重置表单
const resetForm = (needConfirm: boolean = true) => {
  form.value = {
    roomId: '',
    guestName: '',
    guestPhone: '',
    idType: 'idcard',
    idNumber: '',
    stayDays: 1,
    specialRequest: '',
    mode: ACMode.COOLING,
    deposit: 200
  };
  depositPaid.value = false;
  errors.value = {};
  currentStep.value = 0;
};

// 快速填充默认房客信息（张三）
const fillDefaultGuest = () => {
  form.value.guestName = '张三';
  form.value.guestPhone = '13800138000';
  form.value.idType = 'idcard';
  form.value.idNumber = '110101199001011234';
  showSuccess('已填充默认房客信息');
};

const getIdTypeText = (type: string): string => {
  const map: Record<string, string> = {
    idcard: '身份证',
    passport: '护照',
    other: '其他证件'
  };
  return map[type] || type;
};

const maskIdNumber = (idNumber: string): string => {
  if (idNumber.length <= 8) return idNumber;
  return idNumber.slice(0, 4) + '****' + idNumber.slice(-4);
};

const getModeText = (mode: ACMode): string => {
  return mode === ACMode.COOLING ? '制冷' : '制热';
};

const formatDateTime = (timestamp: number): string => {
  return new Date(timestamp).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};
</script>

<style scoped>
.checkin-section {
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  border: 2px solid #f0f4f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

h2 {
  margin: 0 0 24px 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
}

/* 步骤指示器 */
.steps-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.steps-indicator::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}

.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.3s;
}

.step-item.active .step-number {
  background: #067ef5;
  border-color: #067ef5;
  color: white;
  box-shadow: 0 4px 12px rgba(6, 126, 245, 0.3);
}

.step-item.completed .step-number {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.step-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.step-item.active .step-label {
  color: #067ef5;
  font-weight: 600;
}

/* 步骤内容 */
.step-content {
  min-height: 400px;
  margin-bottom: 24px;
}

.step-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.header-content {
  flex: 1;
}

.step-header h3 {
  margin: 0 0 8px 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

.step-description {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

/* 快速填充按钮 */
.btn-quick-fill {
  padding: 10px 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-quick-fill:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* 房间选择 */
.room-query {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
}

.available-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.room-option {
  padding: 20px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  position: relative;
}

.room-option:hover {
  border-color: #067ef5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 126, 245, 0.15);
}

.room-option.selected {
  border-color: #067ef5;
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
}

.room-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.room-number {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.room-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.room-type {
  color: #64748b;
}

.room-price {
  color: #067ef5;
  font-weight: 600;
}

.selected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #10b981;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 表单样式 */
.form-container {
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 600;
  color: #475569;
  font-size: 14px;
}

.required-mark {
  color: #ef4444;
  margin-left: 2px;
}

.form-group input,
.form-group select {
  padding: 11px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  background: white;
  transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #067ef5;
  box-shadow: 0 0 0 3px rgba(6, 126, 245, 0.1);
}

.input-with-unit {
  position: relative;
}

.input-with-unit input {
  width: 100%;
  padding-right: 50px;
}

.input-with-unit .unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.error-tip {
  color: #ef4444;
  font-size: 12px;
  margin-top: -4px;
}

/* 空调设置 */
.ac-settings {
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
}

.setting-group {
  margin-bottom: 32px;
}

.setting-label {
  display: block;
  font-weight: 600;
  color: #475569;
  font-size: 15px;
  margin-bottom: 16px;
}

.mode-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  color: #475569;
}

.mode-btn:hover {
  border-color: #067ef5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 126, 245, 0.15);
}

.mode-btn.active {
  border-color: #067ef5;
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
  color: #067ef5;
}

.mode-btn svg {
  stroke: currentColor;
}

.mode-btn span {
  font-weight: 600;
  font-size: 15px;
}

.mode-btn small {
  font-size: 12px;
  opacity: 0.7;
}

.setting-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.info-icon {
  font-size: 28px;
}

.info-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.info-value {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.tips-box {
  padding: 16px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 10px;
  border: 1px solid #fbbf24;
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 12px;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.8;
}

/* 确认信息 */
.summary-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.summary-section {
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.summary-section h4 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
}

.summary-item.full-width {
  grid-column: 1 / -1;
}

.summary-item .label {
  color: #64748b;
  font-size: 14px;
}

.summary-item .value {
  font-weight: 600;
  color: #1e293b;
  font-size: 14px;
}

.payment-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px;
}

.payment-item.total {
  font-weight: 600;
  font-size: 16px;
  color: #1e293b;
  border-bottom: 2px solid #1e293b;
}

.payment-item.deposit {
  font-weight: 700;
  font-size: 18px;
  border-bottom: none;
  padding-top: 16px;
}

.payment-item .highlight {
  color: #067ef5;
}

.deposit-input {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.deposit-input label {
  font-weight: 600;
  color: #475569;
  font-size: 15px;
  white-space: nowrap;
}

/* 押金勾选框 */
.deposit-checkbox {
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 8px;
  border: 2px solid #93c5fd;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #10b981;
}

.checkbox-text {
  font-size: 16px;
  font-weight: 700;
  color: #1e40af;
}

.checkbox-hint {
  margin-left: 8px;
  font-size: 13px;
  color: #3b82f6;
  font-weight: 500;
}

/* 操作按钮 */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 2px solid #e5e7eb;
}

.btn-primary,
.btn-secondary,
.btn-confirm,
.btn-cancel {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary,
.btn-confirm {
  background: #067ef5;
  color: white;
  box-shadow: 0 2px 4px rgba(6, 126, 245, 0.2);
}

.btn-primary:hover:not(:disabled),
.btn-confirm:hover:not(:disabled) {
  background: #0369a1;
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-confirm:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-secondary {
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.btn-secondary:hover {
  background: #e2e8f0;
}

.btn-cancel {
  background: white;
  color: #ef4444;
  border: 2px solid #fecaca;
}

.btn-cancel:hover {
  background: #fef2f2;
}

/* 已入住列表 */
.occupied-rooms {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid #e5e7eb;
}

.occupied-rooms h3 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.rooms-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: 100px 120px 140px 160px 100px 100px;
  gap: 16px;
  padding: 12px 16px;
  align-items: center;
}

.table-header {
  background: #f8fafc;
  font-weight: 600;
  font-size: 13px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.table-row {
  font-size: 14px;
  color: #475569;
  border-bottom: 1px solid #f1f5f9;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row:hover {
  background: #f8fafc;
}

.room-id {
  font-weight: 600;
  color: #067ef5;
}

.deposit {
  font-weight: 600;
  color: #10b981;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 15px;
}

@media (max-width: 768px) {
  .form-row,
  .mode-buttons,
  .setting-info,
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .rooms-table {
    overflow-x: auto;
  }
}
</style>
